<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">   
    <title>_grid_title_</title>
    <style>
      * {
    font-family: "Microsoft YaHei";
}
      body{
        margin: 0;
        padding: 0;
      }
    [data-sizex='1'] {
  width: calc(10% - 8px);
}
[data-sizey='1'] {
  height: calc(10% - 8px);
}
[data-col='1'] {
  left: calc( 0% + 4px);
}
[data-sizex='2'] {
  width: calc(20% - 8px);
}
[data-sizey='2'] {
  height: calc(20% - 8px);
}
[data-col='2'] {
  left: calc( 10% + 4px);
}
[data-sizex='3'] {
  width: calc(30% - 8px);
}
[data-sizey='3'] {
  height: calc(30% - 8px);
}
[data-col='3'] {
  left: calc( 20% + 4px);
}
[data-sizex='4'] {
  width: calc(40% - 8px);
}
[data-sizey='4'] {
  height: calc(40% - 8px);
}
[data-col='4'] {
  left: calc( 30% + 4px);
}
[data-sizex='5'] {
  width: calc(50% - 8px);
}
[data-sizey='5'] {
  height: calc(50% - 8px);
}
[data-col='5'] {
  left: calc( 40% + 4px);
}
[data-sizex='6'] {
  width: calc(60% - 8px);
}
[data-sizey='6'] {
  height: calc(60% - 8px);
}
[data-col='6'] {
  left: calc( 50% + 4px);
}
[data-sizex='7'] {
  width: calc(70% - 8px);
}
[data-sizey='7'] {
  height: calc(70% - 8px);
}
[data-col='7'] {
  left: calc( 60% + 4px);
}
[data-sizex='8'] {
  width: calc(80% - 8px);
}
[data-sizey='8'] {
  height: calc(80% - 8px);
}
[data-col='8'] {
  left: calc( 70% + 4px);
}
[data-sizex='9'] {
  width: calc(90% - 8px);
}
[data-sizey='9'] {
  height: calc(90% - 8px);
}
[data-col='9'] {
  left: calc( 80% + 4px);
}
[data-sizex='10'] {
  width: calc(100% - 8px);
}
[data-sizey='10'] {
  height: calc(100% - 8px);
}
[data-col='10'] {
  left: calc( 90% + 4px);
}
[data-row='1'] {
  top: calc( 0% + 4px);
}
[data-row='2'] {
  top: calc( 10% + 4px);
}
[data-row='3'] {
  top: calc( 20% + 4px);
}
[data-row='4'] {
  top: calc( 30% + 4px);
}
[data-row='5'] {
  top: calc( 40% + 4px);
}
[data-row='6'] {
  top: calc( 50% + 4px);
}
[data-row='7'] {
  top: calc( 60% + 4px);
}
[data-row='8'] {
  top: calc( 70% + 4px);
}
[data-row='9'] {
  top: calc( 80% + 4px);
}
[data-row='10'] {
  top: calc( 90% + 4px);
}
[data-row='11'] {
  top: calc( 100% + 4px);
}
[data-row='12'] {
  top: calc( 110% + 4px);
}
[data-row='13'] {
  top: calc( 120% + 4px);
}
[data-row='14'] {
  top: calc( 130% + 4px);
}
[data-row='15'] {
  top: calc( 140% + 4px);
}
[data-row='16'] {
  top: calc( 150% + 4px);
}
[data-row='17'] {
  top: calc( 160% + 4px);
}
[data-row='18'] {
  top: calc( 170% + 4px);
}
[data-row='19'] {
  top: calc( 180% + 4px);
}
[data-row='20'] {
  top: calc( 190% + 4px);
}
[data-row='21'] {
  top: calc( 200% + 4px);
}
[data-row='22'] {
  top: calc( 210% + 4px);
}
[data-row='23'] {
  top: calc( 220% + 4px);
}
[data-row='24'] {
  top: calc( 230% + 4px);
}
[data-row='25'] {
  top: calc( 240% + 4px);
}
[data-row='26'] {
  top: calc( 250% + 4px);
}
[data-row='27'] {
  top: calc( 260% + 4px);
}
[data-row='28'] {
  top: calc( 270% + 4px);
}
[data-row='29'] {
  top: calc( 280% + 4px);
}
[data-row='30'] {
  top: calc( 290% + 4px);
}

.dash-board {
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  width:100%;
  height: 100% ;
}
.dash-board > div {
    position: absolute;
}
.dash-board > div > span.resize-icon {
      cursor: se-resize;
      position: absolute;
      right: 0;
      bottom: 0;
      display: inline-block;
      height: 0;
      width: 0;
      border: solid 10px transparent;
      border-bottom: solid 10px var(--md-theme-default-accent, rgba(0, 0, 0, 0.12));
      border-right: solid 10px var(--md-theme-default-accent, rgba(0, 0, 0, 0.12));
}

.chart-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  height: 100%;
}
.chart-card .chart-card-header {
    height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.chart-card .chart-card-header > span:nth-child(1) {
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      font-size: 16px;
      display: block;
      width: calc(100% - 16px);
      padding: 0 8px;
      text-align: center;
      line-height: 40px;
      height: 40px;
}
.chart-card .chart-card-header > span:nth-child(2) {
      display: none;
      position: absolute;
      z-index: 2;
      right: 0;
      margin-right: 8px;
}
.chart-card .chart-card-header1 {
    display: block;
    width: calc(100% - 16px);
    padding: 0 8px;
    text-align: center;
    line-height: 40px;
    height: 40px;
}
.chart-card .chart-card-header:hover > span:nth-child(2) {
    display: inline;
    color: var(--md-theme-default-accent, rgba(0, 0, 0, 0.12));
}
.chart-card .chart-card-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 40px);
}
.chart-card.dashboard {
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
          box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
}
    </style>
  </head>
  <body>
    _template_
  </body>
</html>